<% extends 'layout.html' %>

<% block content %>

<div class="wrap mailpoet-about-wrap">
  <h1><%= __('Greetings, humans.') %></h1>

  <p class="about-text"><%= __('Thanks for using MailPoet! We really appreciate all of your love, affection, [link]and (good) plugin reviews.[/link]')
    |replaceLinkTags('https://wordpress.org/support/plugin/wysija-newsletters/reviews/', {'target' : '_blank'})
    |raw
    %>
  </p>
  <div class="mailpoet-logo"><img src="<%= image_url('welcome_template/mailpoet-logo.png') %>" alt="<%= __('MailPoet Logo') %>" /></div>

  <h2 class="nav-tab-wrapper wp-clearfix">
    <a href="admin.php?page=mailpoet-welcome" class="nav-tab nav-tab-active"><%= __('Welcome') %></a>
    <a href="admin.php?page=mailpoet-update" class="nav-tab"><%= __("What's new") %></a>
  </h2>

  <div class="headline-feature feature-video">
    <div class="videoWrapper">
      <iframe width="1050" height="591" src="https://player.vimeo.com/video/184501111?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
    </div>
  </div>

  <hr>

  <div class="feature-section two-col">
    <h2><%= __('Want to Make MailPoet Even Better?') %></h2>
    <div class="col">
      <h3><%= __('We Need Your Feedback!') %></h3>
      <p><%= __('As a beta tester, you have a very important job: to tell us what you think about this new version. If you love it, tell us! If you hate it, let us know! Any and all feedback is useful.') %></p>
      <p><%= __('To get in touch with us, simply click on the blue circle in the bottom right corner of your screen. This button is visible on all MailPoet pages on your WordPress dashboard.') %> <img width="30" style="margin:0" src="<%= image_url('welcome_template/beacon.png') %>" alt="Beacon" /></p>
    </div>
    <div class="col">
      <h3><%= __('Sharing is Caring') %></h3>
      <p><%= __("By sharing your data <i>anonymously</i> with us, you can help us understand <i>how people use MailPoet</i> and <i>what sort of features they like and don't like</i>.") %> <a href="http://beta.docs.mailpoet.com/article/130-sharing-your-data-with-us" target="_blank"><%= __('Find out more') %> &rarr;</a>
      <br><br>
      <label>
        <input type="checkbox" id="mailpoet_analytics_enabled" value="1"
        <% if(settings.analytics.enabled) %>checked="checked"<% endif %>
        />&nbsp;<%= __("Yes, I want to help!") %>
      </label>
      </p>
    </div>
  </div>

  <hr>

  <div class="feature-section two-col">
    <div class="col">
      <h3><%= __("Subscribe To Our Newsletter") %></h3>
      <p><%= __("About once a month, we send out a pretty cool newsletter ourselves.") %></p>
      <p><%= __("Sign up to get a curated selection of awesome links, tips and tricks for using MailPoet, special offers, and important plugin updates!") %></p>
      <p>
      <iframe width="380" scrolling="no" frameborder="0" src="http://www.mailpoet.com/?wysija-page=1&controller=subscribers&action=wysija_outter&wysija_form=5&external_site=1&wysijap=subscriptions-3" class="iframe-wysija" vspace="0" tabindex="0" style="border-style: none; display:block; visibility: visible; background-color: #f1f1f1!important;" marginwidth="0" marginheight="0" hspace="0" allowtransparency="true" title="<%= __("Subscribe To Our Newsletter") %>"></iframe>
      </p>
    </div>
    <div class="col">
      <h3><%= __("Learn the Ropes") %></h3>
      <p><%= __("New to MailPoet? Check out our brand new email course. Over the span of 3 weeks, we'll teach you how to create and send your first MailPoet email newsletter. Sign up below!") %></p>
      <p>
      <iframe width="100%" height="100%" scrolling="no" frameborder="0" src="http://newsletters.mailpoet.com?mailpoet_form_iframe=4" class="mailpoet_form_iframe" vspace="0" tabindex="0" onload="if(window['MailPoet']) MailPoet.Iframe.autoSize(this);" marginwidth="0" marginheight="0" hspace="0" allowtransparency="true"></iframe>
      </p>
    </div>
  </div>

  <hr>

  <div class="feature-section one-col mailpoet_centered">
    <a class="button button-primary go-to-plugin" href="admin.php?page=mailpoet-newsletters"><%= __("Awesome! Now, take me to MailPoet") %> &rarr;</a>
  </div>

</div>

<script type="text/javascript">
jQuery(function($) {
  // Find all videos
  var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com']"),
  // The element that is fluid width
  $fluidEl = $("body");
  // Figure out and save aspect ratio for each video
  $allVideos.each(function() {
    $(this)
      .data('aspectRatio', this.height / this.width)
      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');
  });
  // When the window is resized
  $(window).resize(function() {
  var newWidth = $fluidEl.width();
  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {
    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));
    });
  // Kick off one resize to fix all videos on page load
  }).resize();

    $(function() {
      $("#mailpoet_analytics_enabled").on("click", function() {
        var is_enabled = $(this).is(":checked") ? true : "";
        MailPoet.Ajax.post({
          api_version: window.mailpoet_api_version,
          endpoint: "settings",
          action: "set",
          data: {
            analytics: { enabled: (is_enabled)}
          }
        }).fail((response) => {
          if (response.errors.length > 0) {
            MailPoet.Notice.error(
              response.errors.map((error) => { return error.message; }),
              { scroll: true }
            );
          }
        });

        if (is_enabled) {
          MailPoet.forceTrackEvent(
            'User has installed MailPoet',
            {'MailPoet Free version': window.mailpoet_version}
          );
        }

      })
    });
});
</script>

<% endblock %>
